<template>
  <div class="filter-header">
    <div class="filter-left">
      <el-input
        v-model="filters.keyword"
        :placeholder="t('share.filter.searchPlaceholder')"
        :prefix-icon="Search"
        clearable
        @input="handleSearch"
      />
      <el-select
        v-model="filters.status"
        :placeholder="t('share.filter.statusPlaceholder')"
        clearable
        @change="handleSearch"
      >
        <el-option :label="t('share.filter.statusOptions.all')" value="all" />
        <el-option :label="t('share.filter.statusOptions.active')" value="active" />
        <el-option :label="t('share.filter.statusOptions.expired')" value="expired" />
        <el-option :label="t('share.filter.statusOptions.disabled')" value="disabled" />
      </el-select>
      <el-date-picker
        v-model="filters.dateRange"
        type="daterange"
        range-separator="-"
        :start-placeholder="t('share.filter.startDatePlaceholder')"
        :end-placeholder="t('share.filter.endDatePlaceholder')"
        :shortcuts="dateShortcuts"
        value-format="YYYY-MM-DD"
        @change="handleSearch"
      />
    </div>
    <div class="filter-right">
      <el-button @click="handleClear">{{ t('share.filter.clearFilter') }}</el-button>
      <el-button type="primary" :icon="Refresh" @click="handleRefresh">{{ t('share.filter.refresh') }}</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Search, Refresh } from '@element-plus/icons-vue'
import { storeToRefs } from 'pinia'
import { useShareStore } from '@/stores/shareStore'
import { useI18n } from 'vue-i18n'

const { t } = useI18n()

const shareStore = useShareStore()
const { filters } = storeToRefs(shareStore)

// 防抖定时器
let searchTimer: NodeJS.Timeout | null = null

const dateShortcuts = [
  {
    text: t('share.filter.dateShortcuts.lastWeek'),
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      return [start, end]
    }
  },
  {
    text: t('share.filter.dateShortcuts.lastMonth'),
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
      return [start, end]
    }
  },
  {
    text: t('share.filter.dateShortcuts.last3Months'),
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
      return [start, end]
    }
  }
]

const handleSearch = () => {
  // 清除之前的定时器
  if (searchTimer) {
    clearTimeout(searchTimer)
  }

  // 设置新的防抖定时器
  searchTimer = setTimeout(() => {
    shareStore.updateFilters(filters.value)
  }, 500) // 500ms防抖
}

const handleRefresh = () => {
  shareStore.fetchShareList()
  shareStore.fetchShareStats()
}

const handleClear = () => {
  filters.value.keyword = ''
  filters.value.status = 'all'
  filters.value.dateRange = null
  shareStore.updateFilters(filters.value)
}
</script>

<style lang="scss">
@import '@/styles/index.scss';

.filter-header {
  @include flex-between;
  gap: 16px;
  background-color: var(--el-bg-color);
  border-radius: 4px;
  padding: 16px;
  box-sizing: border-box;

  @include respond-to('lg') {
    flex-direction: column;
    gap: 12px;
    padding: 12px;
  }

  .filter-left {
    @include flex-start;
    gap: 16px;
    flex: 1;
    min-width: 0;

    @include respond-to('lg') {
      width: 100%;
      gap: 12px;
    }

    @include respond-to('md') {
      flex-direction: column;
    }

    :deep(.el-input) {
      width: 200px;

      @include respond-to('lg') {
        width: 100%;
      }
    }

    :deep(.el-select) {
      width: 120px;

      @include respond-to('lg') {
        width: 100%;
      }
    }

    :deep(.el-date-editor) {
      width: 320px;

      @include respond-to('lg') {
        width: 100%;
      }
    }
  }

  .filter-right {
    @include flex-start;
    gap: 16px;

    @include respond-to('lg') {
      width: 100%;
      justify-content: flex-end;
    }

    @include respond-to('md') {
      justify-content: stretch;

      .el-button {
        flex: 1;
      }
    }
  }
}
</style> 